<template>
  <canvas ref="canvas" class="bg-gray-300" />
</template>

<script setup lang="ts">
import useBetStore from '@/states/useBetStore'
import useCalcBetstore from '@/states/useCalcBetstore'
import useTowerPointStore from '@/states/useTowerPointStore'
import { computed, ref, watch } from 'vue'
import LineCanvas from './LineCanvas'
import { useRoute } from 'vue-router'

const { config } = defineProps<{
  config: CanvasConfig
}>()

const towerPointStore = useTowerPointStore()
const calcBetStore = useCalcBetstore()
const betStore = useBetStore()
const route = useRoute()

const canvas = ref<HTMLCanvasElement>()

const lineData = computed(() => {
  return towerPointStore.points.map((point, index) => {
    const btSpan = calcBetStore.calcBets[index] ? calcBetStore.calcBets[index].btSpan : 0
    return {
      tName: point.tower.tName,
      btSpan,
      x: point.x,
      line: btSpan,
      leiLine: btSpan,
    }
  })
})

betStore.all({ lineId: +route.params.id })

watch(
  [() => config],
  () => {
    new LineCanvas(canvas.value!, config, lineData.value).draw()
  },
  { deep: true },
)
</script>

<style></style>
